<template>
	<view>
		<div class="weui-flex bg-white">
			<div class="weui-flex__item" style="position: relative;">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input weui-select">{{array[index]}}</view>
					<span class="icon icon-74 poac"></span>
				</picker>
			</div>
			<div class="weui-flex__item " style="position: relative;">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input weui-select">{{array1[index]}}</view>
					<span class="icon icon-74 poac"></span>
				</picker>

			</div>
		</div>
		<!-- 行业地区end -->
		<div class="weui-search-bar" style="position: relative;">
			<i class="weui-icon-search"></i>
			<input type="search" class="search-input pbt4" id='search' placeholder='请输入姓名....' /><button class="weui-btn weui-btn_mini"><span
				 class="iconfont icon-jiaohuan1 f-black "></span></button><button class="weui-btn weui-btn_mini" style="margin-top: 0!important;"><span
				 class="iconfont icon-wodedangxuan-copy f-green"></span></button>
		</div>
		<!-- 搜索end -->
		<div class="sc-cards">
			<div class="sc-card qshadow yuanjiao margin10-b sc-mymp" style="padding: 0.8rem 0.625rem;">
				<div class="weui-avatar-circle fr">
					<img src="https://imgs.qunarzz.com/p/tts9/1908/e5/ae14cb05c5d23a02.png_640x360_d9633b29.png">
					<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary sc-addbtn">添加</a>
				</div>
				<h2><span class="f-green">张一凡</span> <span class="f16 f-njc">13949014564</span></h2>
				<p>郑州855软件有限公司</p>
			</div>
			<div class="sc-card qshadow yuanjiao margin10-b sc-mymp" style="padding: 0.8rem 0.625rem;">
				<div class="weui-avatar-circle fr">
					<img src="https://imgs.qunarzz.com/p/tts9/1908/e5/ae14cb05c5d23a02.png_640x360_d9633b29.png">
					<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary sc-addbtn">添加</a>
				</div>
				<h2><span class="f-green">哪吒</span> <span class="f16 f-njc">13949014564</span></h2>
				<p>中国航天事业软件有限公司</p>
			</div>
			<div class="sc-card qshadow yuanjiao margin10-b sc-mymp" style="padding: 0.8rem 0.625rem;">
				<div class="weui-avatar-circle fr">
					<img src="https://imgs.qunarzz.com/p/tts9/1908/e5/ae14cb05c5d23a02.png_640x360_d9633b29.png">
					<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary sc-addbtn">添加</a>
				</div>
				<h2><span class="f-green">牛凡</span> <span class="f16 f-njc">13949014564</span></h2>
				<p>郑州855软件有限公司</p>
			</div>
			<div class="sc-card qshadow yuanjiao margin10-b sc-mymp" style="padding: 0.8rem 0.625rem;">
				<div class="weui-avatar-circle fr">
					<img src="https://imgs.qunarzz.com/p/tts9/1908/e5/ae14cb05c5d23a02.png_640x360_d9633b29.png">
					<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary sc-addbtn">添加</a>
				</div>
				<h2><span class="f-green">张一凡</span> <span class="f16 f-njc">13949014564</span></h2>
				<p>郑州855软件有限公司</p>
			</div>
			<div class="sc-card qshadow yuanjiao margin10-b sc-mymp" style="padding: 0.8rem 0.625rem;">
				<div class="weui-avatar-circle fr">
					<img src="https://imgs.qunarzz.com/p/tts9/1908/e5/ae14cb05c5d23a02.png_640x360_d9633b29.png">
					<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary sc-addbtn">添加</a>
				</div>
				<h2><span class="f-green">张一凡</span> <span class="f16 f-njc">13949014564</span></h2>
				<p>郑州855软件有限公司</p>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: 'picker',
				array: ['从事行业', '计算机', '文化', '体育'],
				array1: ['所在地区', '郑州高新区', '郑州中原区', '荥阳'],
				index: 0,
				// date: currentDate,
				// time: '12:01'
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindTimeChange: function(e) {
				this.time = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.sc-addbtn {
		font-size: 24upx;
	}

	.weui-select {
		padding-left: 10vw;
	}

	.user-name {
		border-bottom: 1px solid #06AD56;
		font-weight: normal;
		margin-right: 25%;
		margin-bottom: 0.85rem;
		line-height: 2.5rem;
	}

	.yuanjiao {
		border-radius: 0.3125rem;
	}

	.sc-mymp {
		padding: 0.625rem;
	}

	.sc-mymp h2 {
		color: #555;
	}

	.sc-mymp p {
		line-height: 1.5rem;
	}

	.sc-mymp .weui-avatar-circle {
		position: absolute;
		right: 0.5rem;
		top: 0.525rem;
		width: 3.5rem;
		height: 3.5rem;
	}

	.sc-mymp .weui-avatar-circle img {
		width: 3.5rem;
		height: 3.5rem;
	}
</style>
